<!--
 * @Descripttion:
 * @Author: Silence
 * @Date: 2023-08-12 11:42:19
 * @LastEditors: Silence
 * @LastEditTime: 2023-08-12 11:42:31
-->
<template>
  <!-- 设备管理 -->
  <div class="div-one">
    <div class="header">
      <el-form :inline="true" :model="dataList" class="demo-form-inline">
        <el-form-item label="设备编号:">
          <el-input v-model="dataList.innerCode" placeholder="请输入">
            <i slot="suffix" class="el-icon-error" />
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            class="cha"
          >查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="body">
      <el-table :data="deviveList" style="width: 100%">
        <el-table-column type="index" label="序号" width="80" />
        <el-table-column prop="innerCode" label="设备编号" width="220" />
        <el-table-column prop="vmType" label="设备型号" width="220" />
        <el-table-column prop="node.name" label="详细地址" width="220" />
        <el-table-column prop="vmStatus" label="运营状态" width="220">
          <template #default="{row}">
            <p>{{ row.vmStatus ? row.vmStatus===1 ? '运营':'撤离' :'未投放' }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="设备状态" width="220">
          <template>
            <span>离线</span>
            <span>货道</span>
            <span>传送轴</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{row}">
            <el-button type="text" @click="detail(row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-row :v-show="totalPage===1">
        <el-col :span="24" style="margin:20px 0">
          <div>
            <span>共{{ total }}条记录  第{{ dataList.pageIndex }}/{{ totalPage }}页</span>
          </div>
          <div>
            <el-button type="text" :disabled="dataList.pageIndex<=1">上一页</el-button>
            <el-button type="text" :disabled="dataList.pageIndex>=totalPage">下一页</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 添加弹窗 -->
    <!-- 弹窗 -->
  </div>
  </div>
</template>
<script>
export default {
  name: '',
  data () {
    return {
      dataList: {
        pageIndex: 1,
        pageSize: 10,
        status: null,
        innerCode: null
      },
      deviveList: [
        {
          id: '111',
          innerCode: '222',
          region: '上海市普陀区金沙江路 1518 弄',
          ownerName: '333',
          vmStatus: '444'
        }
      ]
    }
  },
  computed: {
  },
  created () {
  },
  methods: {
  }
}
</script>
<style lang="scss" scoped>
.el-table{
  span{
  display: inline-block;
  width: 50px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  color: #fff;
  background-color: #48d697;
  border-radius: 15px;
  margin-right: 10px;
}
span:last-child{
  width: 60px;
}
span:first-child{
  background-color: #ffbc29;
}
}

.el-row{
  .el-col{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    div{
      font-size: 14px;
      color: #ccc;
    }
    .el-button{
      width: 70px;
      height: 30px;
      background-color: #d5ddf8;
      text-align: center;
      color: #000;
      padding: 0;
    }
  }
}
.el-drawer_header span:focus {
  outline: 0;
}
.div-one {
  background-color: #f8fafd;
  padding: 20px;
  .header {
    width: 100%;
    background-color: #fff;
    padding: 20px 0 0 20px;
    height: 80px;
    margin-bottom: 20px;
    .cha {
      background-color: #5f84ff;
    }
  }
  .body {
    background-color: #fff;
    padding: 20px 0 0 20px;
    .body-btn {
      margin-bottom: 20px;
      .xin {
        background-color: #ff6725;
      }
      .gong {
        background-color: #fbf4f0;
        color: #000;
      }
    }
    .el-table-column{
      height: 50px;
    }
  }
}
</style>
